<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toDoList</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        #taskForm {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        #taskInput {
            padding: 10px;
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 10px;
        }
        input[type="datetime-local"] {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 10px;
        }
        button {
            padding: 10px 15px;
            background-color: #5cb85c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #4cae4c;
        }
        #taskList {
            list-style-type: none;
            padding: 0;
        }
        .task-item {
            background: white;
            margin: 10px 0;
            padding: 15px;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        .delete-button {
            display: none;  /* 默认隐藏 */
            position: absolute;
            right: 15px;
            top: 15px;
            background-color: #d9534f;
            border: none;
            border-radius: 4px;
            color: white;
            padding: 5px 10px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .delete-button:hover {
            background-color: #c9302c;
        }
        .completed {
            text-decoration: line-through;
            color: #888;
        }
        .complete-button, .uncomplete-button {
            padding: 5px 10px;
            background-color: #5bc0de;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 5px; /* 增加左边距 */
        }
        .complete-button:hover, .uncomplete-button:hover {
            background-color: #31b0d5;
        }
        .remaining-time {
            display: inline; /* 默认显示 */
        }
        .no-tasks-message {
            text-align: center;
            font-size: 24px; /* 增大字体大小 */
            color: #d9534f; /* 显眼的颜色 */
            margin-top: 50px; /* 顶部留出一些空间 */
        }
    </style>
</head>
<body>
    <h1>toDoList</h1>
    <form id="taskForm" method="POST">
        {% csrf_token %}
        <input type="text" id="taskInput" name="title" placeholder="Add a new task" required>
        <input type="datetime-local" name="due_date" placeholder="Due date and time">
        <button type="submit">Add</button>
    </form>
    <ul id="taskList">
        {% if tasks %}
            {% for task in tasks %}
                <li class="task-item {% if task.completed %}completed{% endif %}">
                    <span class="task-title {% if task.completed %}completed{% endif %}">{{ task.title }}</span>
                    {% if task.completed %} (Completed) {% endif %}
                    <span class="remaining-time" {% if task.completed %} style="display:none;" {% endif %}>
                        {% if not task.completed and task.due_date %}
                            {% if task.remaining_time_days >= 0 %}
                                - Remaining: {{ task.remaining_time_days }} days, {{ task.remaining_time_hours }} hours, {{ task.remaining_time_minutes }} minutes
                            {% else %}
                                - Past due
                            {% endif %}
                        {% endif %}
                    </span>
                    <form method="POST" style="display:inline;">
                        {% csrf_token %}
                        <input type="hidden" name="task_id" value="{{ task.id }}">
                        <button type="button" class="complete-button" {% if task.completed %} style="display:none;" {% endif %}>Mark as completed</button>
                        <button type="button" class="uncomplete-button" {% if not task.completed %} style="display:none;" {% endif %}>Unmark</button>
                    </form>
                    <form method="POST" style="display:inline;">
                        {% csrf_token %}
                        <input type="hidden" name="delete_task_id" value="{{ task.id }}">
                        <button type="submit" class="delete-button">Delete</button>
                    </form>
                </li>
            {% endfor %}
        {% else %}
            <div class="no-tasks-message">No tasks available. You can add a task.</div>
        {% endif %}
    </ul>

    <script>
        document.querySelectorAll('.task-item').forEach(item => {
            const completeButton = item.querySelector('.complete-button');
            const uncompleteButton = item.querySelector('.uncomplete-button');
            const taskTitle = item.querySelector('.task-title');
            const remainingTimeText = item.querySelector('.remaining-time');
            const checkbox = item.querySelector('input[type="checkbox"]');

            completeButton.addEventListener('click', () => {
                taskTitle.classList.add('completed'); // 添加划线样式
                remainingTimeText.style.display = 'none'; // 隐藏剩余时间
                completeButton.style.display = 'none'; // 隐藏完成按钮
                uncompleteButton.style.display = 'inline'; // 显示未完成按钮
                checkbox.checked = true; // 勾选复选框
                checkbox.dispatchEvent(new Event('change')); // 触发变化事件
            });

            uncompleteButton.addEventListener('click', () => {
                taskTitle.classList.remove('completed'); // 移除划线样式
                remainingTimeText.style.display = 'inline'; // 显示剩余时间
                uncompleteButton.style.display = 'none'; // 隐藏未完成按钮
                completeButton.style.display = 'inline'; // 显示完成按钮
                checkbox.checked = false; // 取消勾选复选框
                checkbox.dispatchEvent(new Event('change')); // 触发变化事件
            });

            item.addEventListener('mouseenter', () => {
                item.querySelector('.delete-button').style.display = 'inline';
            });
            item.addEventListener('mouseleave', () => {
                item.querySelector('.delete-button').style.display = 'none';
            });
        });
    </script>
</body>
</html>

